{% extends '@Backend/layout.html.twig' %}

{% block web_title %}{% if app.request.get('id') == null %}新增{% else %}编辑{% endif %}banner{% endblock %}

{% block style %}
{% endblock %}

{% block body %}
    {% set a_id = app.request.get('id') %}
     <section class="content">
         <div class="row">
             <div class="col-md-12">
                 <!-- Horizontal Form -->
                 <div class="box box-info">
                     <div class="box-header with-border">
                         <h3 class="box-title">{% if app.request.get('id') == null %}新增{% else %}编辑{% endif %}banner</h3>
                     </div>

                     <div class="row">
                         <div class="col-md-7">
                             <form class="form-horizontal article-data">
                                 <div class="box-body">
                                     <div class="form-group">
                                         <label for="name" class="col-sm-3 control-label"><span class="text-red">*</span> banner图名称：</label>

                                         <div class="col-sm-8">
                                             <input type="text" name="title" class="form-control" id="name" placeholder="请输入banner图名称" value="{{ info.title | default('') }}">
                                         </div>
                                     </div>

                                     <div class="form-group">
                                         <label for="datepickers" class="col-sm-3 control-label"><span class="text-red">*</span> 展示图：</label>

                                         <div class="col-sm-8">
                                             <div class="thumb-img-box">
                                                 {% if a_id != null %}
                                                     <img src="{{ asset(info.image_path | default('')) }}" width="300" style="margin-bottom: 15px;" />
                                                     <span class="thumb-remove">x</span>
                                                 {% endif %}
                                             </div>
                                             <input id="upload-file" type="file" multiple class="file upload-input">

                                             <label class="btn btn-primary cur" for="upload-file">点击上传</label>
                                         </div>
                                     </div>

                                     <div class="form-group">
                                         <label class="col-sm-3 control-label"><span class="text-red">*</span> 排列序号：</label>

                                         <div class="col-sm-8">
                                             <input type="number" name="sort_order" class="form-control" placeholder="请输入非负整数（按序号倒序排列）" value="{{ info.sort_order | default('') }}">
                                         </div>
                                     </div>

                                     <div class="form-group">
                                         <label for="url" class="col-sm-3 control-label"><span class="text-red"></span> 跳转路径：</label>

                                         <div class="col-sm-8">
                                             <input type="text" name="url" class="form-control" id="url" placeholder="请输入跳转路径" value="{{ info.url | default('http://') }}">
                                         </div>
                                     </div>

                                     <div class="form-group">
                                         <label class="col-sm-3 control-label"></label>

                                         <div class="col-sm-8">
                                             <button type="button" class="btn btn-primary pull-left btn-submit">提交</button>
                                         </div>
                                     </div>
                                 </div>

                                 <input type="hidden" name="thumb" value="{{ info.image_path | default('') }}">
                             </form>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
{% endblock %}

{% block js %}
    <script>
        $(function() {
            {% if app.request.get('id') == null %}
            navHighLight('2', '0', '0');
            {% else %}
            navHighLight('2', '0');
            {% endif %}

            var body = $("body");
            body.on("change", '#upload-file', uploadPic);

            //  点击'x'号
            body.on('click', '.thumb-remove', function() {
                $(this).parent('.thumb-img-box').html('');
                $("input[name='thumb']").val('');
            });

            // 点击提交
            $('.btn-submit').on('click', function() {
                var param = $('.article-data').serializeObject();

                if ($.trim(param.title) == '') {
                    layer.msg('请填写标题');
                    return;
                }
                if (param.thumb == '') {
                    layer.msg('请上传图片');
                    return;
                }
                if ($.trim(param.sort_order) == '') {
                    layer.msg('请输入排列序号');
                    return;
                }
                if (!/^[0-9]*$/.test($.trim(param.sort_order))) {
                    layer.msg('排列序号只可输入非负整数');
                    return;
                }

                {% if app.request.get('id') != null %}
                param.id = '{{ app.request.get('id') }}';
                {% endif %}

                $.ajax({
                    url: '{{ path('api_opera_banner') }}',
                    data: param,
                    type: 'POST',
                    success: function(res) {
                        layer.msg(res.message);
                        if (res.errorCode == 0) {
                            setTimeout(function () {
                                window.location.href = '{{ path('backend_banner_list') }}';
                            }, 1500);
                        }
                    }
                })
            })

            /// ajax 上传图片
            function uploadPic() {
                var _file = this;
                var data = new FormData();
                data.append('image', _file.files[0]);

                var asset = '{{ asset('') }}';
                var URL_fileUpload = '{{ path('api_public_upload_image') }}';
                $.ajax({
                    url:URL_fileUpload,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    data: data,
                    success: function (data) {
                        if(data.errorCode == 0){
                            previewFile(_file);
                            layer.msg(data.message);
                            $("input[name='thumb']").val(data.data.path);
                        } else {
                            layer.alert(data.message);
                            return false;
                        }
                    }
                });
            }

        })
    </script>
{% endblock %}